<template>
  <div>
    <nav-text><span slot="navText">当前位置: 数据中心 > 数据查询 > 故障查询</span></nav-text>
    <!-- 搜索条件盒子 -->
    <div class="searchBox">
      <div>
        <div>
          <selectBox>
            <span slot="titleName">仪器类型:</span>
            <el-select
              slot="selectBox"
              v-model="Types"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in insTypeOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </selectBox>
        </div>
        <div>
          <textBox>
            <span slot="titleName">仪器ID:</span>
            <input
              v-model="IDs"
              slot="textBox"
              class="textBoxSize"
              type="text"
              placeholder="请输入仪器ID"
            />
          </textBox>
        </div>
      </div>
      <div>
        <div>
          <selectBox>
            <span slot="titleName">大区:</span>
            <el-select
              slot="selectBox"
              v-model="Regions"
              clearable
              placeholder="请选择大区"
            >
              <el-option
                v-for="item in regionOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </selectBox>
        </div>
        <div>
          <textBox>
            <span slot="titleName">医院名称:</span>
            <input
              @input="hospitalQuest"
              v-model="Hospitals"
              slot="textBox"
              class="textBoxSize"
              type="text"
              placeholder="请输入医院名称"
            />
          </textBox>
          <hospital-quest-box
            v-if="isShowHospitalBox"
            class="hospital-box"
          >

            <span
              class="deleteIcon"
              slot="deleteIcon"
              @click.stop="isShowHospitalBox=false"
            >×</span>
            <span
              slot="spanBox"
              v-if="isNallData"
            >无数据</span>
            <li
              slot="liList"
              @click.stop="selectedHospital(index)"
              v-for="(item,index) in hospitalList"
              :key="index"
            >{{item.dNameCode}}</li>
          </hospital-quest-box>
        </div>
      </div>
      <div>
        <div>
          <selectBox>
            <span slot="titleName">故障级别:</span>
            <el-select
              slot="selectBox"
              v-model="Grade"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in MainTypeOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </selectBox>
        </div>
        <div class="scopeBox">
          <div class="deteLeft">
            <span>日期范围:</span>
          </div>
          <div class="deteRight">
            <el-date-picker
              @change="selectedDateScope"
              prefix-icon="null"
              class="date-picker"
              v-model="dataScopeValue"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="left"
              unlink-panels
              range-separator=""
              start-placeholder="选择开始日期"
              end-placeholder="选择结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>

        </div>
      </div>
      <div>
        <div class="btnBox">
          <div class="layoutInputBox">
            <textBox>
              <span slot="titleName">故障代码:</span>
              <input
                v-model="Codes"
                slot="textBox"
                class="textBoxSize"
                type="text"
                placeholder="请输入故障代码"
              />
            </textBox>
          </div>
          <div class="layoutBtnBox">
            <div>
              <search-button>
                <el-button
                  @click.stop="questDataList"
                  slot="searchBtn"
                  type="success"
                  size="mini"
                >查 询</el-button>
              </search-button>
            </div>
            <div>
              <download-button>
                <el-button
                  slot="dounloadBtn"
                  type="primary"
                  icon='el-icon-upload2'
                  circle
                ></el-button>
              </download-button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :header-cell-style="headStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        border
        :data="tableData"
        :fit="fit"
        :highlight-current-row='highlight'
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dataId"
          label="序 号"
          min-width="40"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="eCode"
          label="仪 器 I D"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="type"
          label="仪 器 类 型"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="errorCode"
          label="故 障 代 码"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="note"
          label="故 障 信 息"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dName"
          label="医 院 名 称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="aName"
          label="大 区"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="level"
          label="故 障 级 别"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="time"
          label="发 生 时 间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="操 作"
        >
          <template slot-scope="scope">
            <el-button
              @click.stop="showDataDetails(scope.row)"
              class="el-button-details"
              size="medium "
              type="text"
            >详 情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <pagination>
      <el-pagination
        @current-change="faultTableData"
        slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="pagesTotal"
        :page-size='pagesSize'
        hide-on-single-page
      >
      </el-pagination>
    </pagination>
    <!-- 查看详情弹窗 -->
    <baseDataBox v-if="isShowDataDetails">
      <span slot="title">数 据 详 情</span>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >仪 器 ID:</label>
            <input
              readonly
              v-model="detailsID"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入仪器ID"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >仪器类型:</label>
            <input
              readonly
              v-model="detailsType"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入仪器类型"
              type="text"
            />
          </baseInput>
        </div>
      </li>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >故障代码:</label>
            <input
              readonly
              v-model="detailsFaultCode"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入故障代码"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >故障信息:</label>
            <input
              readonly
              v-model="detailsFaultMsg"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入故障信息"
              type="text"
            />
          </baseInput>
        </div>
      </li>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >大 区:</label>
            <input
              readonly
              v-model="detailsArea"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入大区"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >医院名称:</label>
            <input
              readonly
              v-model="detailsHosName"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入医院"
              type="text"
            />
          </baseInput>
        </div>
      </li>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >故障级别:</label>
            <input
              readonly
              v-model="detailsFaultJB"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入故障级别"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >发生时间:</label>
            <input
              readonly
              v-model="detailsTime"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入发生时间"
              type="text"
            />
          </baseInput>
        </div>
      </li>
      <label
        slot="textAreatLabel"
        for=""
      >解决方案:</label>
      <textarea
        readonly
        slot="textAreaContent"
        placeholder="请输入故障详情"
        v-model="detailsFaultXQ"
        name=""
        id=""
        cols="116"
        rows="6"
      >1.
      ;2.相应零位传感器故障;3.电机排线或信号线故障;4.驱动板故障5.电机同步带松动;6.电机主动轮松动;7.搬运车电机凹槽计数错误或对应坐标点错误；</textarea>
      <button
        class="returnBtn"
        slot="affirm"
        @click.stop="returnDetailsData"
      >返 回</button>
    </baseDataBox>
  </div>
</template>

<script>
import hospitalQuestBox from "@/components/DataCenter/BaseForm/hospitalQuestBox";
import { hospitalQuest } from "@/request/api.js";
import { faultTableData } from "@/request/api.js";
import navText from "@/components/DataCenter/MyLocation/myLocation";
import textBox from "@/components/DataCenter/BaseForm/textBox";
import searchButton from "@/components/DataCenter/BaseForm/searchBtn";
import dateScopeBox from "@/components/DataCenter/BaseForm/dateScopeBox";
import downloadButton from "@/components/DataCenter/BaseForm/downloadBtn";
import selectBox from "@/components/DataCenter/BaseForm/selectBox";
import dataSelectBox from "@/components/DataCenter/BaseForm/dateSelectBox";
import pagination from "@/components/baseCpn/pagination.vue";
import baseDataBox from "@/components/DataCenter/BaseForm/baseDataBox";
import baseInput from "@/components/DataCenter/BaseForm/baseInput";
import "@/assets/base/dataCenterTableStyle.css";
export default {
  components: {
    navText,
    textBox,
    searchButton,
    downloadButton,
    selectBox,
    dataSelectBox,
    pagination,
    baseDataBox,
    baseInput,
    hospitalQuestBox,
    dateScopeBox,
  },
  mounted() {
    this.faultTableData(this.$page);
    this.regionOption = localStorage.getItem("allArea").split(",");
    this.insTypeOption = localStorage.getItem("instrumentList").split(",");
  },
  data() {
    return {
      dataScopeValue: null,
      dataScopeValueSting:"",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pagesTotal: null,
      pagesSize: 8,
      isNallData: false,
      isShowHospitalBox: false,
      hospitalList: [],
      //详情弹框属性
      detailsID: "",
      detailsType: "",
      detailsFaultCode: "",
      detailsFaultMsg: "",
      detailsArea: "",
      detailsHosName: "",
      detailsFaultJB: "",
      detailsTime: "",
      detailsFaultXQ: "",

      isShowDataDetails: false,
      highlight: true,
      fit: true,
      headStyle: {
        height: "7rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        border: "1px solid #792a4c",
        fontSize: "1.9rem",
      },
      cellStyle: {
        height: "7rem",
        border: "1px solid #792a4c",
        fontSize: "1.8rem",
      },
      tableData: [],

      Types: "",
      IDs: "",
      Regions: "",
      Hospitals: "",
      Grade: "",
      Times: "",
      Codes: "",
      insTypeOption: [],
      regionOption: [],
      MainTypeOption: ["一级故障", "二级故障", "三级故障"],
    };
  },
  methods: {
    selectedDateScope(e) {
      this.dataScopeValueSting = e[0] + "~" + e[1];
       console.log("日期1是", this.dataScopeValue);
       console.log("日期2是", this.dataScopeValueSting);

    },
    questDataList() {
      //开始日期格式化 2021-09-07
      if (this.Times !== "") {
        let startdate = new Date(this.Times);
        let sYear = startdate.getFullYear();
        let sMonth = startdate.getMonth() + 1;
        if (sMonth < 10) {
          sMonth = "0" + sMonth;
        }
        let sDay = startdate.getDate();
        if (sDay < 10) {
          sDay = "0" + sDay;
        }
        this.Times = sYear + "-" + sMonth + "-" + sDay;
        console.log("开始日期", this.Times);
      }
      this.faultTableData("1");
    },
    //表格数据接口
    faultTableData(pages) {
      faultTableData({
        page: pages,
        pageSize: this.$pageSize,

        eType: this.Types,
        aCode: this.Regions,
        level: this.Grade,
        errorCode: this.Codes,
        eCode: this.IDs,
        dCode: this.Hospitals,
        time: this.dataScopeValueSting,
      })
        .then((res) => {
          console.log("故障查询-表格数据请求成功", res);
          this.pagesTotal = res.data.total;
          if (res.data.success) {
            this.tableData = res.data.rows;
            for (var i = 0; i < res.data.rows.length; i++) {
              this.tableData[i].dataId = (pages - 1) * 8 + 1 + i; //js对象中，想在对象中添加一个新属性，直接用这（对象.属性）即可
            }
          } else {
            this.$message.error({
              message: res.data.errorMsg,
            });
          }
        })
        .catch((err) => {
          console.log("故障查询-表格数据请求失败", res);
        });
    },
    selectedHospital(index) {
      this.Hospitals = this.hospitalList[index].dNameCode;
      this.isShowHospitalBox = false;
    },
    hospitalQuest() {
      this.isShowHospitalBox = true;
      hospitalQuest({
        name: this.Hospitals,
        page: "1",
        pageSize: "1000",
      })
        .then((res) => {
          if (res.data.success) {
            this.isNallData = false;
            this.hospitalList = res.data.rows;
          } else {
            this.isNallData = true;
            this.hospitalList[0].dNameCode = "无数据";
          }
          this.hospitalList = res.data.rows;
        })
        .catch((err) => {
          this.$message.error({
            message: res.data.errorMsg,
          });
        });
    },

    returnDetailsData() {
      this.isShowDataDetails = false;
    },
    DetailsData() {
      this.isShowDataDetails = false;
    },
    showDataDetails(e) {
      this.isShowDataDetails = true;
      console.log("详情为", e);
      this.detailsID = e.eCode;
      this.detailsType = e.type;
      this.detailsFaultCode = e.errorCode;
      this.detailsFaultMsg = e.note;
      this.detailsArea = e.aName;
      this.detailsHosName = e.dName;
      this.detailsFaultJB = e.level;
      this.detailsTime = e.time;
      this.detailsFaultXQ = e.solution;
    },
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.searchBox {
  width: 100%;
  height: 16rem;
  display: flex;
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .hospital-box {
      position: absolute;
      right: 0;
      top: 7rem;
    }
    .btnBox {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .layoutInputBox {
        flex: 1;
        padding-right: 2rem;
      }
      .layoutBtnBox {
        flex: 1;
        display: flex;
        flex-direction: row;
        div {
          flex: 1;
        }
      }
    }
    div {
      flex: 1;
    }
  }
  .scopeBox {
    width: 40rem;
    height: 6rem;
    display: flex;
    flex-direction: row;
    .deteLeft {
      flex: 1.3;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      span {
        font-size: 2.2rem;
        margin-right: 2rem;
      }
    }
    .deteRight {
      flex: 2;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      .date-picker {
        width: 100%;
      }
    }
  }
}
.tableBox {
  width: 95%;
  height: 63.5rem;
  margin: 0 auto;
  padding-top: 2rem;
  overflow: hidden;
  .el-button-details {
    font-size: 1.6rem;
    color: #66ff66;
  }
}
.returnBtn {
  margin-right: 42rem;
}
.timeScopeBox {
  width: 6rem;
  height: 6rem;
  background-color: #fff;
}
</style>
<style>
.el-date-editor .el-range-input {
  width: 100%;
  height: 38rem;
  background-color: #0f0f1f;
  border: 0.1rem solid #777777;
  color: #eeeeee;
}

.el-range-editor--small .el-range-input {
  font-size: 1.6rem;
}
.el-range-editor--small .el-range-separator {
  line-height: 2rem;
  font-size: 1.2rem;
}
.el-range-editor--small .el-range__close-icon,
.el-range-editor--small .el-range__icon {
  line-height: 0px;
  width: 0px;
  height: 0px;
}
.el-range-editor.el-input__inner {
  padding: 0px;
}
/* .el-picker-panel__sidebar {
  background-color: #0f0f1f;
} */
.el-date-table td.in-range div {
  background-color: #0f0f1f;
}
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  color: #00ff99;
}
.el-date-editor .el-range__close-icon {
  font-size: 2rem;
  position: absolute;
  right: -1rem;
  top: 50%;
}
</style>